<template>
	<view class="apply-body">
	
	  <view class="info-list">
		  <view class="info-text-img">
			  <h3 style="padding: 20px 0;font-size: 21px;">Hi～有什么需要反馈？</h3>
			  <view style="display: flex;flex-direction: row;align-items: center;justify-items: center;"  @click="hanldToIdeaList()">
				  <image src="/static/images/chen.png"></image><text>提交记录</text>
			  </view>
		  </view>
		<textarea rows="10"  style="border: 1px solid #E2E2E2;border-radius: 5px;width: 95%;height: 150px;resize:none;padding: 10px;
  ;" placeholder="请详细描述您遇到的问题（必填）" maxlength="200" v-model="content">
		</textarea>
	  </view>
	<view class="idea-user">
		<view style="margin: 16px 0;font-size: 16px;color: #30362A;font-weight: bold;">联系方式（非必填）</view>
		<input type="text" class='idea-input' placeholder='请输入' v-model="contact"  placeholder-class="phcolor"></input>
		
	</view>
	  <view class="info-bottom">
		  <view class="info-pass-rapper">
			  <view class="info-pass" @click="submit()">提交</view>
		  </view>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  content:"",//内容
			  contact:''//电话
			};
		},
		methods:{
			hanldToIdeaList(){
				uni.navigateTo({
					url: '../ideaList/index'
				});
			},
			submit(){
				const formData = {
					content:this.content,//内容
					contact:this.contact//电话
				}
				this.$http.post('/user/feedback', formData).then((response) => {
					const res = response.data;
					if(res.code==0){
						uni.showToast({title: res.msg, icon: 'none'});
						uni.navigateTo({
							url: '../ideaList/index'
						});
						this.content = '';//内容
						this.contact = '';//电话
						console.log(this.content+"this.content111")
						console.log(this.contact+"this.contact222")
					}
				})
			}
		}
		}
</script>

<style>
	.apply-body{
	    height: 100%;
	    background-color: #fff;
	    position: absolute;
	    width: 100%;
	}
	.gener-icon{
		position:fixed;
		right: 20px;
		top: 10px;
		z-index: 999999999999;
	}
	.gener-icon image{
		width: 30px;
		height: 30px;
	}

	
	.info-list{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 0 20px;
		}
		.info-item{
			margin: 5px 0;
			position: relative;
		}
		.info-right{
			position: absolute;
			right: 0;
			line-height: 50px;
		}
		.info-right image{
			width: 40px;
			height: 40px;
			margin-top: 5px;
			border-radius: 50%;
			margin-right: 5px;
		}
		.info-left{
			line-height: 50px;
			  color: #969993;
		}
		.info-name{
			position: relative;
			    top: -10px;
		}
		.info-count{
			font-size: 12px;
		}
		.info-number{
			    padding-top: 20px;
			    color: #969993;
		}
		.info-count-number{
			color: #F83600;
			padding-top: 10px;
			font-size: 18px;
		}
		.info-payment{
			background-color: #fff;
			padding: 10px 10px;
		}
		.info-payment-wrapper{
			display: flex;
			flex-direction: row;
			padding: 10px 0;
		}
		.info-payment-img{
			padding-right: 10px;
			height: 100px;
			width: 110px;
		}
		.info-payment-img image{
			width: 100%;
			height: 100%;
		}
		.info-title{
		    padding: 10px;
		}
		.info-bottom{
			height: 80px;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-items: right;
			justify-content: flex-end;
			align-items: center;
			 z-index: 999999;
		}
		.info-no-pass{
			    height: 35px;
			  margin: 0 20px;
			    background-color: #D8D8D8;
			    border-radius: 20px;
			    text-align: center;
			    line-height: 35px;
				color: #969993;
				margin-right: 10px;
		}
		.info-pass{
			height: 40px;
		    background-color: #FF5F49;
			border-radius: 20px;
			text-align: center;
			line-height: 40px;
			color: #fff;
			margin: 0 20px;
		}
		.info-img{
			height: 120px;
			width: 120px;
			margin: auto;
		}
		.info-img image{
			width: 100%;
			height: 100%;
		}
		.info-text{
			font-size: 14px;
			    text-align: center;
			    color: #969993;
			    padding-bottom: 20px;
		}
		.info-pass-rapper{
			  width: 100%;
		}
		/*上传图片*/
		.question{
		  width: 100%;
		  min-height: 100%;
		}
		.card-content{ padding: 10px 0!important;}
		/* .question .mu-raised-button{ margin: 10px 10%; width: 80%;} */
		.question a{ background: none; box-shadow: none; border:1px solid rgba(17,11,21,1); color: #110B15;}
		.update{
		  width: 100%;
		  /* height: 100%; */
		}
		.update .name{
		  width: 100%;
		  padding: 15px 0;
		}
		.update .name input{
		  width: 100%;
		  border: 0;
		  height:48px;
		  background:rgba(255,255,255,1);
		  border-radius:5px;
		  outline: none;
		  padding: 0 15px;
		}
		.update .info{
		  width: 100%;
		  padding: 0 15px;
		}
		.update .info p{
		  font-size:12px;
		  font-family:PingFang-SC-Medium;
		  font-weight:500;
		  color:rgba(120,120,120,1);
		}
		.btn_info{
		  text-align: center;
		  margin-top: 50px;
		}
		.update .info .btn{
		  width:309px;
		}
		.line_brief {
		  background: #fff;
		  border-radius: 5px;
		  border: 1px solid rgba(230,230,230,1);
		  padding-bottom: 8px !important;
		}
		.question_list{
		  position: fixed;
		  top: 34px;
		  z-index: 100012;
		  right: 15px;
		}
		.question_list p{
		  font-size:14px;
		  font-family:PingFang-SC-Medium;
		  font-weight:500;
		  color:rgba(254,73,70,1);
		}
		.fk_img{
		  width: 100%;
		  padding: 0 15px;
		  display: flex;
		}
		.up_img{
		  width:70px;
		  height: auto;
		  text-align: center;
		  position: relative;
		}
		.up_img image{
		  width: 70px;
		  height:70px;
		}
		.up_img input{
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  opacity: 0;
		}
		.up_img .text{
		  font-size:14px;
		  font-family:PingFang-SC-Medium;
		  font-weight:500;
		  color:rgba(120,120,120,1);
		}
		.list_img .info{
		  margin-left: 8px;
		}
		.list_img .info image{
		  width: 70px;
		  height: 70px;
		}
		.footer_btn{
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  margin: 0;
		  height:48px;
		  border-radius: 0;
		  background:linear-gradient(90deg,rgba(159,205,164,1) 0%,rgba(54,157,65,1) 100%);
		}
		.list_img{
		  display: flex;
		  flex-wrap: wrap;
		}
		.evaluate-c-b{
			overflow: hidden;
		}
		.upload-img{
		width: 80px;
		    height: 80px;
		    text-align: center;
		    color: #999999;
		    font-size: 11px;
		    border-radius: 2px;
		    display: inline-block;
		    float: left;
		    margin: 7px;
		}
		.goods-img-item{
		width: 80px;
		    height: 80px;
		    margin: 7px;
		    float: left;
		    position: relative;
		}
		.goods-img-item:nth-child(4n){
			margin-right: 0;
		}
		.idea-user{
			margin: 16px 17px;
		}
	.idea-input{
		border-bottom: 1px solid #D8D8D8;
	}
	.uni-input-placeholder {
	    color: #D7DBD4;
	    font-size: 15px;
	}
	.uni-textarea-placeholder{
		color: #D7DBD4;
		font-size: 15px;
	}
	.info-text-img{
		display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
		}
	.info-text-img image{
		width: 22px;
		height: 22px;
	}
	
</style>
